<template>
  <page-header-wrapper>
    <page-tab-list>
      <div style="margin-top: 50px"></div>
      <a-form-model :model="params" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="支付宝AppId">
          <a-input v-model="params.app_id" />
        </a-form-model-item>

        <a-form-model-item label="应用私钥">
          <a-input v-model="params.app_private_key" />
        </a-form-model-item>

        <a-form-model-item label="支付宝公钥证书地址">
          <div class="flex">
            <a-input v-model="params.alipay_public_cert" disabled />

            <a-upload
              class="btn"
              name="crt"
              :action="upload_url"
              :headers="upload_headers"
              :showUploadList="false"
              @change="(e) => onUploadChange('alipay_public_cert', e)"
            >
              <a-button> <a-icon type="upload" />上传 </a-button>
            </a-upload>

            <a-button class="btn" type="danger" @click="remove('alipay_public_cert')"> 删除 </a-button>
          </div>
        </a-form-model-item>

        <a-form-model-item label="应用公钥证书地址">
          <div class="flex">
            <a-input v-model="params.app_public_cert" disabled />

            <a-upload
              class="btn"
              name="crt"
              :action="upload_url"
              :headers="upload_headers"
              :showUploadList="false"
              @change="(e) => onUploadChange('app_public_cert', e)"
            >
              <a-button> <a-icon type="upload" />上传 </a-button>
            </a-upload>

            <a-button class="btn" type="danger" @click="remove('app_public_cert')"> 删除 </a-button>
          </div>
        </a-form-model-item>

        <a-form-model-item label="支付宝根证书地址">
          <div class="flex">
            <a-input v-model="params.alipay_root_cert" disabled />

            <a-upload
              class="btn"
              :showUploadList="false"
              name="crt"
              :action="upload_url"
              :headers="upload_headers"
              @change="(e) => onUploadChange('alipay_root_cert', e)"
            >
              <a-button> <a-icon type="upload" />上传 </a-button>
            </a-upload>

            <a-button class="btn" type="danger" @click="remove('alipay_root_cert')"> 删除 </a-button>
          </div>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSave" :loading="loading"> 保存 </a-button>
        </a-form-model-item>
      </a-form-model>
    </page-tab-list>
  </page-header-wrapper>
</template>
<script>
import { getCrtIndex, setCrtIndex } from '@/api/setting/alipayConfig'
import api from '@/api/storage'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  name: 'AlipayCertificateConfig',
  components: {},
  computed: {
    upload_file_name: function () {
      return 'crt'
    },
    upload_url: function () {
      const baseUrl = process.env.VUE_APP_API_BASE_URL
      return baseUrl + api.upload_crt
    },
    upload_headers: function () {
      const token = storage.get(ACCESS_TOKEN)
      return { Authorization: 'Bearer ' + token }
    },
    upload_list_style: function () {
      return this.type === 'image' ? 'picture' : 'text'
    },
    // 上传文件删除回调
    onUploadRemove: function () {
      //
    },
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      params: {
        app_id: null,
        alipay_public_cert: null,
        app_public_cert: null,
        alipay_root_cert: null,
        app_private_key: null,
        ali_public_key: null,
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    remove(el) {
      this.params[el] = ''
    },

    // 上传文件改变事件
    onUploadChange(el, info) {
      let url = ''
      for (let i = 0; i < info.fileList.length; i++) {
        console.log('info.fileList[i].response,', info.fileList[i].response)
        if (info.fileList[i].response) {
          console.log(info.fileList[i].response)
          if (info.fileList[i].response.code === 0) {
            url = info.fileList[i].response.data[0].url
          }
        }
      }

      let { params } = this
      params[el] = url
    },

    async onSave() {
      this.loading = true
      const hide = this.$message.loading('提交中', 0),
        res = await setCrtIndex(this.params)
      hide()

      this.loading = false

      if (!res.code) {
        this.$message.success('保存成功！')
        return
      }

      this.$error({
        content: res.msg,
      })
    },

    getData() {
      getCrtIndex().then((res) => {
        const data = res.data
        if (data) {
          let { app_id, alipay_public_cert, app_public_cert, alipay_root_cert, app_private_key } = data
          this.params = {
            app_id,
            alipay_public_cert,
            app_public_cert,
            alipay_root_cert,
            app_private_key,
          }
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;

  .btn {
    margin-left: 20px;
  }
}
</style>
